<template>
  <div class="transaction_in">
    <div class="sharing_left" id="echartborder">
      <dayline v-if="klineshow =='dayline'"></dayline>
      <echarts v-else></echarts>
    </div>
    <div class="sharing_right" ><Exhartsright></Exhartsright></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import echarts from './echarts/echarts.vue'; //k线图ehcart版本
import dayline from './echarts/dayecharts.vue'; //分时线ehcarts版本
import Exhartsright from './echarts/exhartsright.vue'; //分时图右面列表
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    klinetab: state => state.klinetab/* k线显示面板 */,
  }),
  watch: {
    klinetab(val){
    	// console.log(val);
    	this.klineshow=val;
    },
  },
  data() {
    return {
      klinehight: 1,
      klineshow:null,
    };
  },
  components: {
    echarts,dayline,
    Exhartsright,
  },
  created: function() {
    this.klineshow = this.klinetab;
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped="scoped" lang="less">
/*K线*/
.transaction_in {
  width: 100%;
  height: 100%;
  background: #000;
  min-width: 1200px;
}

.sharing_left {
  float: left;
  width: 80%;
  height: 100%;
  display: flex;
  /* overflow-y: auto; */
  .echartborder_2{
  	width: 50%;
  	height: 100%;
    border: 1px solid #fff;
  }
}

.sharing_right {
  float: left;
  width: 20%;
  height: 100vh;
}
/* 滚动条 */
.transaction_in::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.transaction_in::-webkit-scrollbar-track {
  background: rgb(0, 0, 0);
  border-radius: 2px;
}
.transaction_in::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 10px;
}
.transaction_in::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.transaction_in::-webkit-scrollbar-corner {
  background: #179a16;
}
</style>
